<template>
    <div class="wrapper">
        <img src="http://www.dell-lee.com/imgs/vue3/user.png" class="wrapper__img">
        <div class="wrapper__input">
            <input type="text" class="wrapper__input__content" v-model="username" :placeholder="firstInput">
        </div>
        <div class="wrapper__input">
            <input type="password" class="wrapper__input__content" v-model="password" :placeholder="secondInput">
        </div>
        <div class="wrapper__login-button" @click="login">登录</div>
        <div class="wrapper__link">
        <div class="wrapper__login-link" @click="register">立即注册</div>
        <div class="wrapper__login-link">忘记密码</div>
        </div>
        <Toast v-if="showToast" />
    </div>
</template>
<script>
import { reactive, toRefs } from '@vue/reactivity'
import { useRouter } from 'vue-router'
import Toast, { handleToast } from '../../components/Toast.vue'

const userLoginEffect = (changeToastStatus) => {
  const router = useRouter()
  const data = reactive({ username: '', password: '' })
  const login = () => {
    changeToastStatus('登录成功')
    localStorage.setItem('isLogin', true)
    router.push('/')
  }
  return { login, data }
}
const usseRegisterEffect = () => {
  const router = useRouter()
  const register = () => {
    router.push('/register')
  }
  return register
}
export default {
  name: 'Login',
  components: {
    Toast
  },
  setup () {
    const pageData = reactive({
      firstInput: '请输入用户名',
      secondInput: '请输入密码'
    })

    const { showToast, changeToastStatus } = handleToast()
    const { login, data } = userLoginEffect(changeToastStatus)
    const register = usseRegisterEffect()

    return {
      ...toRefs(pageData),
      ...toRefs(data),
      login,
      register,
      showToast
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../style/viriable.scss';
.wrapper {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    &__img {
        display: block;
        width: .66rem;
        height: .66rem;
        margin: 0 auto .4rem auto;
    }
    &__input {
        height: .48rem;
        margin: 0 .4rem .16rem .4rem;
        padding: 0 .16rem;
        background: #F9F9F9;
        border: .01rem solid rgba(0, 0, 0, 0.10);
        border-radius: .06rem;
        &__content {
            border: none;
            outline: none;
            width: 100%;
            line-height: .48rem;
            background: none;
            font-size: .16rem;
            &::placeholder {
                color: $content-notice-fontcolor;
            }
        }
    }
    &__login-button {
        margin: .32rem .4rem .16rem .4rem;
        height: .48rem;
        background: #0091ff;
        box-shadow: 0 0.04rem .08rem rgba(0,145,255,0.32);
        border-radius: 0.04rem;
        color: $bg-color;
        font-size: .16rem;
        line-height: .48rem;
        text-align: center;
    }

    &__link {
        display: flex;
        justify-content: center;
    }
    &__login-link {
        font-size: .14rem;
        text-align: center;
        color: $content-notice-fontcolor;
    }
    &__login-link:first-child:after{
        content: '|';
        margin: .05rem;
    }
}
</style>
